<template>
	<view class="flex-col relative page" :style="{ 'padding-top': top + 'px' }" >
			<view  class=" h-46 flex   f-j-s"  style="flex-shrink:initial ;box-sizing:content-box	" >
				<view @click="back(1)" class="flex f-a-c f-s-0 padding-lr10 van-icon van-icon-arrow-left f20-size"></view>
			
			
			    <view class="flex f-a-c f-s-0 padding-lr10 f20-size">托运订单</view>
				<view class="flex   " >
				
					<!-- <text  @click="go('/pages/search/list?shopId='+id)" class="flex f-s-0 f-a-c padding-lr6 van-icon van-icon-search f20-size"></text> -->
					<!-- <view @tap.stop="toshare"  class="flex f-a-c f-j-c padding-lr5 van-icon van-icon-share-o f20-size"></view> -->
					<view @click="$refs.menuBtn.open()" class="flex f-s-0 f-a-c padding-lr10 van-icon van-icon-weapp-nav f20-size" style="position:relative">
						<text v-if="chatLen > 0"
								class="flex f-a-c f-j-c box-b f11-size t-color-w bg-color-r wrap-len b-radius padding-lr2 "
								style="font-size: 9px; min-width: 16px; height: 16px; position: absolute; top: 5%; left: 20%; white-space: nowrap;">{{chatLen}}</text>
					</view>
				</view>
			
				<!-- #ifdef MP-WEIXIN -->
					<xcx-header></xcx-header>
				<!-- #endif -->
		
				
			</view>
				<menu-btn ref="menuBtn" :url="currentUrl" title="托运订单" img=""></menu-btn>
		<view class="flex-col pos_3">
			<text class="font_3 text_4 ">托运订单(用户端)</text>
		</view>
		<scroll-view class="padding-12 safe-area bg-color-f7" @scrolltolower="loadList" scroll-y="true"
			style="height: 100%;">
			<view v-if="list.length <= 0" class="flex f-a-c f-j-c f-c">
				<view class="padding-30"></view>
				<no-data></no-data>
			</view>
			<view class="flex-col list-item section space-y-14" @click="go('/pages/ys/order/detail?orderNo='+item.orderNo)" v-for="(item, index) in list" :key="index">
				<view class="flex-row justify-between ">
					<view class="flex-row "  style=" flex-shrink: 0;">

						<text class="urgentStatus text_5 shrink-0 text-wrapper" v-if="item.urgentStatus == 1">加急</text>
						<text class="font_1 text_6">{{item.sendCity }}</text>
						<image class="shrink-0 image_7"
							src="https://qiniu.ccchongya.com/chongya/images/16947555379102027670.png" />

						<text class="font_1 text_6">{{item.receiveCity }}</text>
					</view>
					<text class="font_1 text_6">发布时间：{{item.buyTime  | time}}</text>
				</view>
				<view class="flex-row justify-between items-center group_4">
					

					<text class="font_3" v-if="item.status == 0">待确认</text>
					<text class="font_3" v-else-if="item.status == 1">待付款</text>
					<text class="font_3" v-else-if="item.status == 2">确认,已付款</text>
					<text class="font_3" v-else-if="item.status == 3">拖运中</text>
					<text class="font_3" v-else-if="item.status == 4">已送达</text>
					<text class="font_3" v-else-if="item.status == 5">退款</text>
					<text class="font_3" v-else-if="item.status == 6">部分退款</text>
					<text class="font_3" v-else-if="item.status == 7">已取消</text>
					<text class="font_3" v-else-if="item.status == 9">已完成</text>
					
					<text class="font_3" v-if="item.refundStatus == 1">退款中</text>
					<text class="font_3" v-else-if="item.refundStatus == 2">部分退款</text>
					<text class="font_3" v-else-if="item.refundStatus == 3">已退款</text>
					<text class="font_3" v-else></text>
					
					<!-- <text class="font_3" v-if="item.status == 8">已完成</text> -->
					<text class="font_5 text_9 text_10" v-if="item.shopName"> {{item.shopName}}</text>
					
					
	

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
		import petData from '@/config/petData.config.js';
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	export default {
		components: {},
		props: {},
		data() {
			return {
					currentUrl: '',
				chatLen:0,
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isflag:true,
				orderNo:'',
				list: [],
				totalPage: 1,
				page: 1,
				pageSize: 20,
			};
		},
		// mounted() {
		// 	this.getList();
		// },
		onLoad(options) {
			console.log("options", options)
			this.orderNo = options.orderNo
			this.init();
			
		     this.currentUrl = `${this.$mConfig.hostUrl}/pages/ys/order/entrust?inviteCode=`+getApp().globalData.inviteCode;

		},
		onShow(){
			this.$nextTick(() => {
				this.chatLen =	uni.getStorageSync('chatLen');
				console.log("this.chatLen",this.chatLen)
			});
		},
		methods: {
			toshare() {
				console.log("111");
				let url =  `${this.$mConfig.hostUrl}/pages/ys/order/entrust`;
			  // #ifdef H5
			  if (this.$mPayment.isWechat()) {
			    this.shareClass = 'show';
			  } else {
			    this.$mHelper.h5Copy(this.url);
			  }
			  // #endif
			  // #ifdef APP-PLUS
				this.$mHelper.handleAppShare(url, this.appName, this.shop.name, this.shop.cover);
			// #endif
			},
			loadList() {
				if (this.page < this.totalPage) {
					this.page += 1;
					this.getList();
				}
			},
			init() {

				let self = this;
				if (!this.isflag) {
					return
				}
				console.log("this.isflag",this.isflag)
				this.isflag = false;
				self.getList();
				// $.ajax({
				// 	url: API.getTyServiceApi,
				// 	data: {
				// 		orderNo: this.orderNo
				// 	},
				// 	method: 'GET',
				// 	loading: true,
				// 	loadingText: "获取报价" + ['…'],
				// 	success(res) {
				// 		console.log("res", res)
				// 		let data = res.data;
				// 		data.forEach(item => {
				// 			item['select'] = false
				// 		})
				// 		self.dataList = data;
				// 		self.isflag = true;
				// 	}
				// })
			},
			getList() {
				let self = this;
				$.ajax({
					url: API.getMemberOrderListApi,
					data: {
						// orderNo: this.orderNo,
						page: self.page,
						page: self.page,
						pageSize: self.pageSize
					},
					method: 'GET',
					success(res) {
						if (!res.data.list) {
							self.list = [];
							return;
						}
						let list = [];
						if (self.page != 1) {
							list = self.list.concat(res.data.list);
						} else {
							list = res.data.list ? res.data.list : [];
						}
						self.list = list;
						self.totalPage = res.data.totalPage;
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	@import url("@/static/css/style.css");

	.page {
		background-color: #f7f9f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.font_1 {
		font-size: 24rpx;
		line-height: 43rpx;
		color: #081329;
	}

	.group_2 {
		padding-top: 28rpx;
		overflow-y: auto;
	}

	.group_3 {
		padding: 0 18rpx;
	}

	.image_6 {
		width: 708rpx;
		height: 208rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		/* line-height: 30rpx; */
		color: #000000;

	  font-size: 28rpx;

	  color: #081329;
	}

	.text_4 {
		font-weight: 700;
	}

	.pos_3 {
		 padding: 0 32rpx;
	}

	.list-item {
		margin-right: 6rpx;
	}
	.list-item:nth-child(3n+1){
		background: linear-gradient(to right, #ACC3F2, #ffffff);
	}
	.list-item:nth-child(3n+2){
		background: linear-gradient(to right, #92E189, #ffffff);
	}
	.list-item:nth-child(3n+3){
		background: linear-gradient(to right, #EEBDDF, #ffffff);
	}

	.section {
		padding: 24rpx 12rpx 32rpx 28rpx;
		border-radius: 10rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.space-y-14{
		margin-top: 16rpx;
	}
	.space-y-14>view:not(:first-child),
	.space-y-14>text:not(:first-child),
	.space-y-14>image:not(:first-child) {
		margin-top: 28rpx;
	}

	.urgentStatus {
		font-size: 20rpx;
		line-height: 40rpx;
		color: #ffffff;
	}

	.text_5 {
		color: #ffffff;
	}

	.text_6 {
		margin-left: 24rpx;
	}

	.image_7 {
		margin-left: 12rpx;
		margin-top:16rpx;
		width: 42rpx;
		height: 16rpx;
	}

	.text_7 {
		margin-left: 20rpx;
	}

	.text_8 {
		line-height: 20rpx;
	}

	.group_4 {
		padding: 0 8rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 23rpx;
		color: #081329;
	}

	.text_9 {
		margin-right: 16rpx;
	}

	.text_10 {
		line-height: 22rpx;
	}



	view {  flex-shrink: 0;	}

	.space-y-26 > view:not(:first-child),
	.space-y-26 > text:not(:first-child),
	.space-y-26 > image:not(:first-child) {
	  margin-top: 52rpx;
	}
	.list-item {
	  margin-right: 6rpx;
	  padding: 24rpx 12rpx 40rpx 24rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
	  overflow: hidden;
	}
	.space-y-21 > view:not(:first-child),
	.space-y-21 > text:not(:first-child),
	.space-y-21 > image:not(:first-child) {
	  margin-top: 42rpx;
	}
	.space-x-7 > view:not(:first-child),
	.space-x-7 > text:not(:first-child),
	.space-x-7 > image:not(:first-child) {
	  margin-left: 14rpx;
	}
	.text-wrapper {
	  padding: 0 12rpx;
	  background-color: #4578ff;
	  border-radius: 6rpx;
	  text-align:center
	}


	.image_6 {
	  border-radius: 296rpx;
	  width: 120rpx;
	  height: 120rpx;
	}
	.group_2 {
	  padding-left: 108rpx;
	}
	.space-x-10 > view:not(:first-child),
	.space-x-10 > text:not(:first-child),
	.space-x-10 > image:not(:first-child) {
	  margin-left: 20rpx;
	}
	.text-wrapper_2 {
	  margin-top: 52rpx;
	  padding: 24rpx 0;
	  background-color: #ffc300;
	  border-radius: 386rpx;
	  width: 261rpx;
	  height: 75rpx;
	  border: solid 1.2rpx #ffc300;
	}
	.space-y-16 > view:not(:first-child),
	.space-y-16 > text:not(:first-child),
	.space-y-16 > image:not(:first-child) {
	  margin-top: 32rpx;
	}

</style>
